<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		table{width: 600px;border-collapse: collapse}
		td{
			border: 1px solid #c0c0c0;
		}
	</style>
</head>
<body>
<input type="text" id="cityName">
<input type="button" value="查询">
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0">
	<thead>
	<tr>
		<td>日期</td>
		<td>星期</td>
		<td>最低温度</td>
		<td>最高温度</td>
		<td>风</td>
	</tr>
	</thead>
	<tbody>

	</tbody>
</table>
<script src="jquery.min.js"></script>
<script>
$(function(){
	$("input[type=button]").on("click",function(){
		var cityName = $("#cityName").val();
		$.ajax({
		  url:"http://api.jisuapi.com/weather/query",
		  type:"post",
		  data:{
			 appkey:'7ca5f245254f2b88',
		     city:cityName
		  },
		  dataType:"jsonp",
		  success:function (data) {
		    var weathers = data.result.daily;
		    var trhtml="";
		    for(var i=0;i<weathers.length;i++){
		        trhtml+=`
					<tr>
						<td>${weathers[i]['date']}</td>
						<td>${weathers[i]['week']}</td>
						<td>${weathers[i]['night']['templow']}</td>
						<td>${weathers[i]['day']['temphigh']}</td>
						<td>${weathers[i]['day']['winddirect']}</td>
					</tr>
		        `;

		    }
		    $("tbody").html(trhtml);
		  },
		  beforeSend:function () {
		    
		  },
		  error:function () {
		    
		  },
		  complete:function () {
		    
		  }
		})
	})
})
</script>
</body>
</html>